<template>
	<view class="page rank">
		<div class="c-header">
<!--			<div class="rank-nav">-->
<!--          <div class="back" @click="onBack">-->
<!--              <van-icon name="arrow-left" color="#fff"/>-->
<!--          </div>-->
<!--          <div class="text">荣誉排行榜</div>-->
<!--      </div>-->
        <div></div>
        <div class="rank-tabs">
            <div
                @click="onChangeTab('运动里程')"
                :class="['rank-tab', rankTabName === '运动里程' ? 'active' : '' ]">
                运动里程
            </div>
            <div
                @click="onChangeTab('跑步速度')"
                :class="['rank-tab', rankTabName === '跑步速度' ? 'active' : '' ]">
                跑步速度
            </div>
            <div
                @click="onChangeTab('消耗热量')"
                :class="['rank-tab', rankTabName === '消耗热量' ? 'active' : '' ]">
                消耗热量
            </div>
        </div>
		</div>

      <div class="rank-body">
          <div class="date-btn-group">
              <div
                  @click="onChangeDate('日榜', 1)"
                  :class="['date-btn', rankDateName === '日榜' ? 'active' : '' ]">日榜</div>
              <div
                  @click="onChangeDate('周榜', 2)"
                  :class="['date-btn', rankDateName === '周榜' ? 'active' : '' ]">周榜</div>
              <div
                  @click="onChangeDate('月榜', 3)"
                  :class="['date-btn', rankDateName === '月榜' ? 'active' : '' ]">月榜</div>
          </div>
          <div class="rank-list">
              <div class="rank-item" v-for="(item,index) in rankList" :key="index">
                  <div class="rank-num">
                      <div v-if="index < 3" :class="['icon' + (index + 1)]"></div>
                      <span v-else>{{ index + 1 }}</span>
                  </div>

                  <div class="rank-avatar">
                      <image class="img" :src="item.head_pic"></image>
                  </div>

                  <div class="rank-desc">
                      <div class="rank-name">{{ item.name }}</div>
                      <div class="rank-value">{{ item.sumTab }}KM</div>
                  </div>
              </div>
              <div class="rank-item rank-item-my">
                  <div class="rank-num" style="flex-grow: 1">
                  </div>

<!--                  <div class="rank-avatar">-->
<!--                      <image class="img" src=""></image>-->
<!--                  </div>-->
<!--        -->
<!--                  <div class="rank-desc">-->
<!--                      <div class="rank-name color-l">我</div>-->
<!--                      <div class="rank-value color-l">100KM</div>-->
<!--                  </div>-->

                  <div class="run-btn" @click="toRouter">
                      去跑步
                  </div>
              </div>

          </div>


      </div>
	</view>
</template>

<script>
import http from '@/api/api.js'

	export default {
		data() {
			return {
          rankTabName: '运动里程',
          rankDateName: '日榜',
          rankList: [
              {name: '礼貌待人的XXXX', sumTab: 10},
              {name: '礼貌待人的XXXX', sumTab: 10},
              {name: '礼貌待人的XXXX', sumTab: 10},
              {name: '礼貌待人的XXXX', sumTab: 10},
              {name: '礼貌待人的XXXX', sumTab: 10},
          ]
			}
		},
      created() {
        this.getData(1)
      },
		methods: {
        getData(type) {
            http.getRankList({
                type
            }).then(res => {
                this.rankList = res.day_motion_list
            })
        },
        onBack() {
            uni.navigateBack()
        },
        onChangeTab(name) {
            this.rankTabName = name
        },
        onChangeDate(name, value) {
            this.getData(value)
            this.rankDateName = name
        },
      toRouter() {
          uni.redirectTo({
            url: '/pages/sport/sport'
          })
      }
		}
	}
</script>

<style lang="scss">
.rank {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 80rpx;
    .rank-body {
        flex-grow: 1;
        padding: 0 32rpx;
        display: flex;
        flex-direction: column;
        .date-btn-group {
            padding: 24rpx 0;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            align-items: center;
            .date-btn {
                width: 100rpx;
                height: 47rpx;
                line-height: 47rpx;
                border-radius: 24rpx;
                text-align: center;
                font-size: 24rpx;
                background: #E5E5E5;
                color: #333333;
                border: 1px solid #E5E5E5;
                margin-right: 23rpx;
            }
            .date-btn.active {
                color: #18A053;
                background: #E6FAF1;
                border: 1px solid #18A053;
            }
        }

        .rank-list {
            flex-grow: 1;
            overflow: auto;
            padding: 20rpx 0;
            position: relative;
            padding-bottom: 134rpx;

            .rank-item-my {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 134rpx;
                width: 100%;
                z-index: 2;

                box-shadow: 0px -5px 29px 0px rgba(0,0,0,0.1);
            }
            .color-l {
                color: #4EC78A !important;
            }
            .rank-item {
                padding: 20rpx 0;
                display: flex;
                align-items: center;

                .run-btn {
                    padding: 0 30rpx;
                    height: 47rpx;
                    line-height: 47rpx;
                    color: #ffffff;
                    font-size: 22rpx;
                    background: #54C68B;
                    border-radius: 24rpx;
                    text-align: center;
                }
                .rank-num {
                    width: 64rpx;
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 100rpx;
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                    .icon1 {
                        width: 44rpx;
                        height: 44rpx;
                        background-image: url("/static/images/rank/1.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                    .icon2 {
                        width: 44rpx;
                        height: 44rpx;
                        background-image: url("/static/images/rank/2.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                    .icon3 {
                        width: 44rpx;
                        height: 44rpx;
                        background-image: url("/static/images/rank/3.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .rank-avatar {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #A3A3A3;
                    margin-right: 23rpx;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .rank-desc {
                    flex-grow: 1;
                    height: 100rpx;
                    .rank-name {
                        margin-top: 13rpx;
                        font-size: 24rpx;
                        line-height: 23rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        margin-bottom: 26rpx;
                    }
                    .rank-value {
                        font-size: 35rpx;
                        font-family: DIN;
                        font-weight: bold;
                        color: #999999;
                    }
                }
            }
        }
    }
    .c-header {
        background-color: #0F153B;
        height: 170rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .rank-tabs {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .rank-tab {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #666666;
            line-height: 62rpx;
            position: relative;
            margin-bottom: 4rpx;
        }
        .rank-tab.active {
            color: #ffffff;

            &::after {
                position: absolute;
                display: inline-block;
                content: ' ';
                width: 80%;
                height: 4rpx;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                background-color: #ffffff;
            }
        }
    }
    .tabs-box {
        background-color: #0F153B;
        height: 125rpx;
    }
    .rank-nav {
        position: relative;
        background-color: #0F153B;
        padding-top: 10rpx;
        .text {
            width: 100%;
            text-align: center;
            line-height: 35rpx;
            font-size: 32rpx;
            color: #ffffff;
        }
        .back {
            position: absolute;
            left: 34rpx;
            top: 0;
            height: 35rpx;
            line-height: 35rpx;
            font-size: 32rpx;
            color: #ffffff;
        }
    }
}
</style>
